<template>
  <div style="margin-left: 3px">
    <div style="margin-top:3px">
      <el-input style="width: 240px; margin-right: 10px " v-model="data.name" placeholder="请输入参数"/>
      <el-button type="primary">查询</el-button>
      <el-button type="primary">重置</el-button>
      <el-button type="primary">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">统计</el-button>
      <el-button type="primary">批量删除</el-button>
    </div>
    <div style="margin-top:5px">
      <el-table :data="data.tableData" border style="width: 100%">
        <el-table-column prop="date" label="名称"/>
        <el-table-column prop="name" label="日期"/>
        <el-table-column prop="address" label="爱好"/>
      </el-table>
    </div>
    <div style="margin-top:5px">
      <el-pagination
          v-model:current-page="data.page"
          v-model:page-size="data.size"
          :page-sizes="[5,10,15]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
      />
    </div>
  </div>
</template>
<script setup>
import {reactive} from "vue";

const data = reactive({
  name: null,
  tableData: [
    {date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles',},
    {date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles',},
    {date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles',},
  ],
  page: 1,
  size: 10,
  total: 47
});
</script>
<style>

</style>